<template>
    <view class="phone_login">
        <uni-nav-bar fixed status-bar :border="false" left-icon="left" title="登录" @clickLeft="back" />
        <image class="login_icon" src="../../static/logo.png" mode="scaleToFill"></image>
        <view class="content">
            <view class="element">
                <image class="icon" src="../../static/icon/1.png"></image>
                <input v-model.trim="form.phone" type="text" placeholder="输入你的手机号" />
            </view>
            <view class="element">
                <image class="icon" src="../../static/icon/2.png"></image>
                <input :disabled="switchState" v-model.trim="form.code" type="text" placeholder="输入你的验证码" />
                <text v-if="timer" class="verification_code c_868686">{{ time }}s</text>
                <button v-else :disabled="switchState" class="verification_code" @click="sendCode">获取验证码</button>
            </view>
            <view class="element">
                <image class="icon" src="../../static/icon/3.png"></image>
                <input :disabled="!switchState" v-model.trim="form.pwd" type="password" placeholder="输入登录密码" />
                <switch class="sw" :checked="switchState" @change="switchChange"></switch>
            </view>
            <view>
                <checkbox color="#275BFF" :checked="checked" @click="checkboxChang"></checkbox>已阅读并同意<text class="xieyi" @click="toxieyi">《用户服务协议》</text>
            </view>
        </view>
        <button class="login_btn" @click="login">登 录</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            form: {
                phone: null,
                code: null,
                pwd: null
            },
            switchState: false,
            checked: false,
            time: 60,
            timer: null
        };
    },
    methods: {
        sendCode() {
            const { phone } = this.form;
            if (!phone) {
                return uni.showToast({
                    title: '请输入手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            if (!/^1[3456789]\d{9}$/.test(phone)) {
                return uni.showToast({
                    title: '请检查手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            uni.$http.post('/user/index/sendCode', {
                phone,
                type: 'login'
            }).then(res => {
                const { code, msg } = res.data || {};
                if (code != 1) {
                    uni.showToast({
                        title: msg,
                        icon: "none",
                        duration: 2000
                    });
                } else {
                    this.timer = setInterval(() => {
                        this.time--;
                        if (this.time == 0) {
                            this.time = 60;
                            this.timer = null;
                        }
                    }, 1000)
                }
            })
        },
        back() {
            this.$emit('close')
        },
        switchChange() {
            this.switchState = !this.switchState;
        },
        checkboxChang() {
            this.checked = !this.checked;
        },
        toxieyi() {
            uni.navigateTo({
                url: '/pagesMy/protocol/protocol'
            });
        },
        pwdLogin() {
            const { phone, pwd } = this.form;
            if (!phone) {
                return uni.showToast({
                    title: '请输入手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            if (!/^1[3456789]\d{9}$/.test(phone)) {
                return uni.showToast({
                    title: '请检查手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            if (!pwd) {
                return uni.showToast({
                    title: '请输入密码',
                    icon: "none",
                    duration: 2000
                });
            }
            uni.$http.post('/user/index/pwdLogin', {
                phone,
                pwd
            }).then(res => {
                const { code, msg, data } = res.data || {};
                if (code != 1) {
                    uni.showToast({
                        title: msg,
                        icon: "none",
                        duration: 2000
                    });
                } else {
                    this.$emit('login', data);
                }
            })
        },
        verificationCodeLogin() {
            const { phone, code } = this.form;
            if (!phone) {
                return uni.showToast({
                    title: '请输入手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            if (!/^1[3456789]\d{9}$/.test(phone)) {
                return uni.showToast({
                    title: '请检查手机号',
                    icon: "none",
                    duration: 2000
                });
            }
            if (!code) {
                return uni.showToast({
                    title: '请输入验证码',
                    icon: "none",
                    duration: 2000
                });
            }
            uni.$http.post('/user/index/phoneLogin', {
                phone,
                code
            }).then(res => {
                const { code, msg, data } = res.data || {};
                if (code != 1) {
                    uni.showToast({
                        title: msg,
                        icon: "none",
                        duration: 2000
                    });
                } else {
                    this.$emit('login', data);
                }
            })
        },
        login() {
            const { switchState, checked } = this;
            if (!checked) {
                return uni.showToast({
                    title: '请阅读并勾选用户协议',
                    icon: "none",
                    duration: 2000
                });
            }
            if (switchState) {
                this.pwdLogin();
            } else {
                this.verificationCodeLogin();
            }
        }
    },
    created() {
        wx.abc = this;
    }
}
</script>
<style lang="scss" scoped>
.phone_login {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    .c_868686 { color: #868686; }
    .login_icon {
        width: 160rpx;
        height: 80px;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translatex(-50%);
    }
    .content {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translatex(-50%);
        .element {
            position: relative;
            margin-bottom: 35rpx;
            input {
                border-bottom: 1px solid #707070;
                height: 50rpx;
                width: 480rpx;
                padding-left: 60rpx;
            }
            .icon {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                top: 5rpx;
            }
            .verification_code {
                position: absolute;
                right: 0;
                top: 0;
                z-index: 9;
                padding: 0 10rpx;
                line-height: 45rpx;
                border: none;
                font-size: 30rpx;
                background: unset;
            }
            .sw {
                position: absolute;
                right: 0;
                top: -16rpx;
                z-index: 9;
                transform: scale(.8);
            }
        }
    }
    .login_btn {
        position: absolute;
        bottom: 10%;
        width: 80%;
        background-color: #275BFF;
        left: 50%;
        transform: translatex(-50%);
        border-radius: 50rpx;
        color: #fff;
    }
    .xieyi {
        color: #2860FF;
    }
}
</style>